import React, {useState,useEffect} from "react";
import {CalculateList} from "./CalculateList";
import * as S from "../Home/styles";

import {Modal,Pressable,Image} from 'react-native';
import AsyncStorage from "@react-native-async-storage/async-storage";

const MadalScreen = ({modalVisible,setModalVisible}:any)=>{

  const [ pageNmu,setPageNum ] = useState(1)
  
  return(
    <Modal
      visible={modalVisible}
      transparent={false}
      animationType="fade"
      >
      <Pressable style={{flex:1,backgroundColor:'rgba(0, 0, 0, 0.72)',paddingTop:Platform.OS=='ios'? 0 :0}} onPress={()=>{
        setPageNum(pre=>pre+1)
        // Alert.alert(JSON.stringify(pageNmu))
        if(pageNmu>=1){
          setModalVisible(false)
          AsyncStorage.setItem('guideCalculate','1')
        }
      }}>
        {/* <ImageBackground
          style={{flex:1,backgroundColor:'red'}}
          source={require("../../assets/guidePage/home_1.png")}
        ></ImageBackground> */}
        {
          pageNmu == 1 
          ?
          <Image
            style={{width:'100%',height:"100%",}}
            source={require("../../assets/guidePage/calculate_1.png")}
          />
          :
          ''
        }



      </Pressable>
    </Modal>
    
  )
}

const Calculate = (props) => {
  const [modalVisible, setModalVisible] = useState(false);
  const fetchData =  async ()=>{
    let guideCalculate = await AsyncStorage.getItem('guideCalculate')
    if(!guideCalculate){
      setModalVisible(true)
    }
  }
  useEffect(() => {
    // init()
    // AsyncStorage.removeItem('guideCalculate')
    fetchData()
    return () => {
    };
  }, []);

    return (
      <S.GrayContainer style={{paddingTop:0,paddingBottom:0}}>
        <CalculateList {...props}/>
        <MadalScreen modalVisible={modalVisible} setModalVisible={setModalVisible}/>
      </S.GrayContainer>
  );
};

export default Calculate;
